<template>
  <view class="page group-info">

<!--    <view v-if="!circle.quit" class="group-members">-->
<!--      <view class="member-items">-->
<!--        <view v-for="(member,idx) in circleMembers" :key="idx">-->
<!--          <view class="member-item" v-if="idx<9">-->
<!--            <head-image :id="member.userId" :name="member.aliasName" :url="member.headImage"-->
<!--                        :size="100" :online="member.online"></head-image>-->
<!--            <view class="member-name">-->
<!--              <text>{{ member.aliasName }}</text>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="invite-btn" @click="onInviteMember()">-->
<!--          <uni-icons type="plusempty" size="28" color="#888888"></uni-icons>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="member-more" @click="onShowMoreMember()">查看圈子成员</view>-->
<!--    </view>-->

    <view class="group-detail">
      <uni-section title="圈子名称:" titleFontSize="14px">
        <template v-slot:right>
          <text class="detail-text">{{ circle.name }}</text>
        </template>
      </uni-section>
      <uni-section title="圈主:" titleFontSize="14px">
        <template v-slot:right>
          <text class="detail-text">{{ ownerName }}</text>
        </template>
      </uni-section>

      <uni-section title="是否公开:" titleFontSize="14px">
        <template v-slot:right>
          <text class="detail-text">{{ circle.isSearchable ? '是' : '否' }}</text>
        </template>
      </uni-section>

      <uni-section title="是否允许加入:" titleFontSize="14px">
        <template v-slot:right>
          <text class="detail-text">{{ circle.isAllowJoin ? '是' : '否' }}</text>
        </template>
      </uni-section>

      <uni-section title="圈子公告:" titleFontSize="14px">
        <uni-notice-bar :text="circle.notice"/>
      </uni-section>

      <view v-if="isOwner && !circle.quit" class="group-edit" @click="onEditCircle()">修改圈子资料 ></view>
      <view class="group-edit" @click="onShowMoreMember()">查看圈子成员 ({{circle.memberCount}}) </view>
    </view>

    <bar-group v-show="circle.quit">
      <btn-bar type="primary" title="加入圈子" @click="onApplyCircle()"></btn-bar>
    </bar-group>

    <bar-group v-show="!circle.quit">
      <btn-bar type="primary" title="发动态" @click="onSendMessage()"></btn-bar>
      <btn-bar v-show="!isOwner" type="danger" title="退出圈子" @click="onQuitCircle()"></btn-bar>
      <btn-bar v-show="isOwner" type="danger" title="解散圈子" @click="onDissolveCircle()"></btn-bar>
    </bar-group>


  </view>
</template>

<script>
export default {
  data() {
    return {
      circleId: null,
      circle: {},
      circleMembers: []
    }
  },
  methods: {
    onApplyCircle(){
      uni.showModal({
        title: '打个招呼',
        content: '你好，对你的圈子很感兴趣',
        editable: true, // 允许输入
        placeholderText: '你好',
        success: (res) => {
          if (res.confirm) {
            const message = res.content; // 获取用户输入
            if (message && message.length <= 50) {
              // 处理添加朋友的逻辑
              this.$http({
                url: `/circle/apply?circleId=${this.circle.id}&circleName=${this.circle.name}&message=${message}`,
                method: "POST"
              }).then((res) => {
                uni.showToast({
                  title: '已发送申请',
                  icon: 'none'
                })
              })
            } else {
              uni.showToast({
                title: '输入不能超过50个字符',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    onFocusSearch() {
    },
    onInviteMember() {
      uni.redirectTo({
        url: `/pages/circle/circle-invite?id=${this.circleId}`
      })
    },
    onShowMoreMember() {
      uni.navigateTo({
        url: `/pages/circle/circle-member?id=${this.circleId}`
      })
    },
    onEditCircle() {
      if (!this.isOwner){
        uni.showToast({
          title: "你不是圈主",
          icon: 'none'
        });
        return
      }

      uni.navigateTo({
        url: `/pages/circle/circle-edit?id=${this.circleId}`
      })
    },
    onSendMessage() {
      uni.redirectTo({
        url: "/pages/moment/moment-add?circleId=" + this.circleId
      })
    },
    onQuitCircle() {
      uni.showModal({
        title: '确认退出?',
        success: (res) => {
          if (res.cancel)
            return;
          this.$http({
            url: `/circle/quit/${this.circleId}`,
            method: 'DELETE'
          }).then(() => {
            uni.showModal({
              title: `退出成功`,
              content: `您已退出圈子'${this.circle.name}'`,
              showCancel: false,
              success: () => {
                setTimeout(() => {
                  uni.switchTab({
                    url: "/pages/circle/circle"
                  });
                  this.circleStore.removeCircle(this.circleId);
                }, 100)
              }
            })
          });
        }
      });
    },
    onDissolveCircle() {
      console.log(this.circle.name)
      uni.showModal({
        title: '确认解散?',
        content: `确认要解散圈子'${this.circle.name}'吗?`,
        success: (res) => {
          if (res.cancel)
            return;
          this.$http({
            url: `/circle/delete/${this.circleId}`,
            method: 'delete'
          }).then(() => {
            uni.showModal({
              title: `解散成功`,
              content: `圈子'${this.circle.name}'已解散`,
              showCancel: false,
              success: () => {
                setTimeout(() => {
                  uni.switchTab({
                    url: "/pages/circle/circle"
                  });
                  this.$store.commit("removeCircle", this.circleId);
                  //this.$store.commit("removeGroupChat",this.groupId);
                }, 100)
              }
            })
          });
        }
      });

    },
    loadCircleInfo() {
      this.$http({
        url: `/circle/detail/${this.circleId}`,
        method: 'GET'
      }).then((circle) => {
        this.circle = circle;
      });
    },
    // loadCircleMembers() {
    //   this.$http({
    //     url: `/circle/members/${this.circleId}`,
    //     method: "GET"
    //   }).then((members) => {
    //     this.circleMembers = members.filter(m => !m.quit);
    //   })
    // }
  },
  computed: {
    ownerName() {
      // let member = this.circleMembers.find((m) => m.userId == this.circle.ownerId);
      // return member && member.aliasName;
      return this.circle.ownerName
    },
    isOwner() {
      return this.circle.ownerId == this.userStore.userInfo.id;
    }
  },
  onLoad(options) {
    // uni.showLoading({
    //   title: '加载中...'
    // });
    this.circleId = options.id;
    // 查询群聊信息
    this.loadCircleInfo(options.id)
    // 查询群聊成员
    // this.loadCircleMembers(options.id)
  }

}
</script>

<style lang="scss" scoped>
.group-info {
  .group-members {
    padding: 30rpx;
    background: white;

    .member-items {
      display: flex;
      flex-wrap: wrap;

      .member-item {
        width: 120rpx;
        display: flex;
        flex-direction: column;
        margin: 8rpx 2rpx;
        position: relative;
        align-items: center;
        padding-right: 5px;
        white-space: nowrap;

        .member-name {
          width: 100%;
          flex: 1;
          font-size: 14px;
          overflow: hidden;
          text-align: center;
          white-space: nowrap;
        }
      }

      .invite-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100rpx;
        height: 100rpx;
        margin: 10rpx;
        border: #686868 dashed 2px;
        border-radius: 10%;
      }
    }

    .member-more {
      padding: 20rpx;
      text-align: center;
      font-size: 16px;
    }
  }


  .group-detail {
    //margin-top: 30rpx;
    padding: 30rpx;
    background: white;

    .detail-text {
      font-size: 28rpx;
      font-weight: 600;
    }

    .group-edit {
      padding: 20rpx;
      text-align: center;
      font-size: 30rpx;
    }
  }


  .btn-group {
    margin-top: 30rpx;
    padding: 30rpx;
    background: white;


    .btn {
      margin: 10rpx;
    }
  }


}
</style>